﻿<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath() + "/";
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<base href="<%=basePath%>">
<title>开始朗读</title>
<link rel="stylesheet" href="css/style2/d_common.css">
<link rel="stylesheet" href="css/style2/common1.css">
<link href="css/jplayer.blue.monday.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script src="js/layer/layer.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jplayer.playlist.min.js"></script>
<script type="text/javascript" src="js/video/adapter-latest.js"></script>
	<script type="text/javascript" src="js/video/audio.js"></script>
<style type="text/css">
.styleBtn {
	position: relative;
	width: 100%;
	height: 60px;
	padding-top: 1px;
}

.styleBtn .btnTips {
	display: inline-block;
	line-height: 60px;
	width: 15%;
	margin-left: 19%;
	text-align: left;
	font-size: 20px;
}

.styleBtn .sBtn {
	display: inline-block;
	position: relative;
	min-width: 80px;
	padding: 0px 5px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	background: #026bbc;
	margin: 10px;
	color: #fff;
	font-size: 18px;
	border-radius: 3px;
}

.tableList {
	position: relative;
	width: 100%;
	min-height: 450px;
}

#pageBtn {
	position: relative;
	float: right;
	margin: 14% 20% 0 0;
}

#pageBtn a {
	display: block;
	margin-bottom: 60%;
}

#pageBtn a img {
	width: 50px;
}

.audio-play {
	width: 100%;
	margin-top: 10px;
}

.audio-play>img {
	width: 60px;
	float: left;
	margin: 15px 10px 0 20%;
}

.slider .loaded,.slider .pace {
	opacity: 1;
}

#player {
	float: left;
	width: 55%;
	height: auto;
	padding: 0px;
	border-radius: 0px;
	box-shadow: none;
	position: relative;
	border-radius: 5px;
	background: none;
}

.slider .pace {
	background: #fff;
}

#player .ctrl .progress .shuffle {
	background-image: url(img/shuffle.png);
	margin: -8px 5px;
}

#player .ctrl .progress .repeat.once {
	position: relative;
	margin: -8px 40px 0 0px;
}

#playlist tr:hover {
	color: #fff;
}

#playlist tr.playing {
	background: url(img/playing.png) no-repeat 0 center;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
}

#playlist {
	background: none;
	box-shadow: none;
}

.part-bottom {
	width: 100%;
	position: absolute;
	left: 0px;
	bottom: 0px;
	background: rgba(2, 107, 188, 0.5);
}

.jp-audio {
	font-size: 16px;
	width: 100%;
	font-family: Verdana, Arial, sans-serif;
	line-height: 1.6;
	color: #fff;
	border: none;
	text-align: center;
	background-color: rgba(0, 0, 0, 0);
}

.jp-playlist {
	width: 60%;
	float: left;
	background-color: none;
	background-color: rgba(0, 0, 0, 0);
	border-top: none;
	margin-left: 15%;
	color: #fff;
}

.jp-playlist .tspan {
	text-align: center;
	color: #000;
	display: block;
	float: left;
	font-size: 18px;
}

.jp-playlist .musicname {
	width: 45%;
}

.jp-playlist ul {
	list-style-type: none;
	margin: 10px 0 0 0;
	padding: 0 0px;
	font-size: .72em;
}

.jp-playlist ul li {
	padding: 5px 0px !important;
	border-bottom: none;
	margin: 8px 0;
}

.jp-playlist ul li a .tspan {
	color: #fff !important;
	font-size: 16px;
}

.jp-playlist .musicartist {
	width: 35%;
}

.jp-playlist .musictime {
	width: 20%;
}

.jp-interface {
	position: relative;
	background-color: rgba(0, 0, 0, 0);
	width: 100%;
}

.jp-playlist-current {
	background: #026bbc;
	border-radius: 3px;
}

.jp-audio .jp-controls {
	position: relative;
	width: 67%;
	min-width: 820px;
	padding: 25px 20px 0 20px;
	margin: 0 auto !important;
	overflow: visible;
}

.curImg {
	position: relative;
	float: left;
	width: 50px;
	margin-top: -10px;
}

.musicAndsinger {
	position: relative;
	float: left;
	margin: -10px 5px;
	width: 120px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.jp-audio .jp-type-playlist .jp-progress {
	left: 0px;
	top: 0px;
	position: relative !important;
	float: left;
	width: 300px;
	margin: 15px 20px;
	background: none;
	height: 10px;
}

.jp-audio .jp-type-playlist .jp-time-holder {
	left: 305px;
	width: 300px;
	top: 10px;
}

.jp-volume-controls {
	position: relative;
	top: 0px;
	float: left;
	left: 0px;
	width: 200px;
}

.jp-volume-controls {
	position: relative;
	top: 12px;
	float: left;
	left: 0px;
	width: 201px;
	/*  transform: rotate(-90deg);*/
}

.jp-volume-bar {
	background-image: none;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 4px;
	height: 8px;
	width: 100px;
	top: 3px;
}

.jp-volume-bar-value {
	background-image: none;
	background: #fff;
	border-radius: 4px;
	height: 8px;
}

.jp-seek-bar {
	background-image: none;
	background: rgba(0, 0, 0, 0.5);
	width: 0px;
	height: 100%;
	cursor: pointer;
	border-radius: 5px;
}

.jp-play-bar {
	background-image: none;
	width: 0px;
	height: 100%;
	background: #fff;
	border-radius: 5px;
}

.jp-audio .jp-type-playlist .jp-toggles {
	width: 55px;
	margin: 8px 0;
	position: relative;
	left: 0px;
	top: 0px;
	float: right;
}

.jp-toggles button {
	height: 20px;
}

.jp-repeat {
	background-position: 0 -291px;
}
</style>
</head>

<body>
	<div id="back">
		<div class="header">
			<div class="logo">
				<a ><img src="img/n_logo.png" alt="">&nbsp;
				</a>
			</div>
			<div class="user">
				<img
					src="${user.pic==null?'img/new_head.png':user.pic==''?'img/new_head.png':user.pic }"
					alt="">
				<div class="admin">
					<span class="name">${user.name }</span><span class="number">【${user.cardno
						}】</span>
				</div>
			</div>
		</div>
		<!--end header-->
		<div class="main main-read">
			<div class="styleBtn">
				<span class="btnTips">背景音乐</span> <a class="sBtn" type="1">民族</a> <a
					class="sBtn" type="2">流行</a> <a class="sBtn" type="3">钢琴曲</a> <a
					class="sBtn" type="4">摇滚</a> <a class="sBtn" type="5">说唱</a>
			</div>
			<div id="jquery_jplayer_1" class="jp-jplayer"></div>
			<div id="jp_container_1" class="jp-audio" role="application"
				aria-label="media player">
				<!--音乐列表-->
				<div class="jp-playlist">
					<span class="musicname tspan">名称</span><span
						class="musicartist tspan">作者</span><span class="musictime tspan">时长</span>
					<div class="clear"></div>

					<ul>
					</ul>
				</div>
				<!--音乐列表-->
				<div id="pageBtn">
					<a href="javascript:void(0)" id="prevPage"><img
						src="img/new_prev.png" /> </a> <a href="javascript:void(0)"
						id="nextPage"><img src="img/new_next.png" /> </a>
				</div>
				<!--	<div class="clear"></div>-->



				<div class="part-bottom">
					<div class="jp-type-playlist">
						<div class="jp-gui jp-interface">


							<div class="jp-controls">
								<img src="img/autoPlayer.png" class="curImg" id="cureentSongImg" />
								<p class="musicAndsinger">
									<span id="songName">歌曲名字</span></br> <span id="singerName">作者名字</span>
								</p>
								<button class="jp-previous" role="button" tabindex="0">previous</button>
								<button class="jp-play" role="button" tabindex="0">play</button>
								<button class="jp-next" role="button" tabindex="0">next</button>
								<!--<button class="jp-stop" role="button" tabindex="0">stop</button>
								</div>-->
								<!--音乐进度条-->
								<div class="jp-progress">
									<div class="jp-seek-bar">
										<div class="jp-play-bar"></div>
									</div>
								</div>
								<div class="jp-volume-controls">
									<button class="jp-mute" role="button" tabindex="0">mute</button>
									<!--<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
										-->
									<div class="jp-volume-bar">
										<div class="jp-volume-bar-value"></div>
									</div>
								</div>
								<div class="jp-toggles">
									<button class="jp-repeat" role="button" tabindex="0">repeat</button>
									<button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
								</div>
								<div class="jp-time-holder">
									<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
									<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
								</div>

							</div>

							<div class="jp-no-solution">
								<span>Update Required</span> To play the media you will need to
								either update your browser to a recent version or update your <a
									href="http://get.adobe.com/flashplayer/" target="_blank">Flash
									plugin</a>.
							</div>
						</div>
					</div>
				</div>
				<!--end partbottom-->

			</div>
			<!--end jp_container_1-->

			<!--<div class="clear"></div>-->

		</div>
		<!--end main-->

	</div>
	<!--end back-->

	<div class="footer">
		<div class="read-btn">
			<a  class="start-btn">开始</a> <a
				 class="over-btn">结束</a>
		</div>
	</div>
	<script>
			$(document).ready(function() {
			
			var curPage=0;
			var mmmm=serachList(curPage,1);
			function serachList(pageNo,type){
			var music=[];
				$.ajax({
					async: false,
					cache: false,
					type: 'post',
					dataType: "json",
					url: 'declaimer/getMusic?guid=${user.guid}&type='+type+'&pageNo='+pageNo, // 请求的action路径
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						alert("请求失败！");
					},
					success: function(data) {
						var am = eval("[" + data.message + "]");
						for(var i=0;i<am.length;i++)
							music.push(am[i]);
					}
				});
				return music;
			}
				var myMuic = new jPlayerPlaylist({
					jPlayer: "#jquery_jplayer_1",
					cssSelectorAncestor: "#jp_container_1"
				},mmmm, {
					swfPath: "../../dist/jplayer",
					supplied: "oga, mp3",
					wmode: "window",
					useStateClassSkin: true,
					autoBlur: false,
					smoothPlayBar: true,
					/*verticalVolume:true,*/
					keyEnabled: true
				});

			var sBtn=$(".sBtn");
	 		/*默认选择第一个类型音乐*/
	 		var musicType = 1;
	 		sBtn.eq(0).css({"background":"#fbb100"});
		 	sBtn.click(function(){
		 		musicType=$(this).attr("type");
		 		myMuic.setPlaylist(serachList(1,musicType));
		 		sBtn.css({"background":"#026bbc"});
		 		$(this).css({"background":"#fbb100"});
			});
				
				
				/*上下页翻页*/
				var np=$("#nextPage");
				var pp=$("#prevPage");
				np.click(function(){
					curPage+=1;
					var mm=serachList(pageNums,curPage);
					myMuic.setPlaylist(mm);
				});
				pp.click(function(){
					curPage-=1;
					var mm=serachList(pageNums,curPage);
					myMuic.setPlaylist(mm);
				});
				
				/*初始的时候，默认第一首歌音乐信息*/
					var curSong=$("#songName");
					var curSinger=$("#singerName");
					curSong.text(mmmm[0].title);
					curSinger.text(mmmm[0].artist);
			});

			/*点击选择音乐时，该音乐的信息显示在播放指示条相应位置上*/
				$(document).on("click",".jp-playlist li",function(){
					var curSong=$("#songName");
					var curSinger=$("#singerName");
					curSong.text($(".jp-playlist-current").find(".musicname").text());
					curSinger.text($(".jp-playlist-current").find(".musicartist").text());
			
				});
			/*点击选择音乐时，该音乐的信息显示在播放指示条相应位置上*/	
		
			
				

			/*音频选择*/

		var i = 600;
        Timeout();
      
		function Timeout() {
			if (i > 0) {
				i--;
				setTimeout(function() {
					Timeout();
				}, 1000);
			} else {
				setEncoderState(0);
			}
		}

		//打开自动播放
		var height = $('.artical').height();
		var p = 0;
		$('.nBtn').click(function() {
			if (height > 400 * (p + 1)) {
				p++;
				$('.artical').css('top', (-390 * p) + 'px');
			}
		});
		$('.pBtn').click(function() {
			if (p > 0) {
				p--;
				$('.artical').css('top', (-390 * p) + 'px');
			}
		});
		getMedia(3);
		var isread = false;
		$('.start-btn').click(function() {
			//change('<%=basePath%>declaimer/materialinfo?guid=${user.guid}&id=${material.id }');
			if ('${user.cardno}' == undefined
					|| '${user.cardno}' == '') {
				layer.msg("超时退出，请重新刷卡登录！",{icon : 0,time : 3000},
					function() {
						window.location.href = '<%=basePath%>declaimer/first?devicecode=${devicecode}&guid=${user.guid}';
				});
				return;
			}
			if(isread){
				return;
			}
	        $.ajax({
	          async : false,
	          cache : false,
	          type : 'post',
	          dataType : "json",
	          url :  'declaimer/readtype?type=1&cardno=${user.cardno}&guid=${user.guid}&activityid=${activityid}&materialid=${material.id }&devicecode=${devicecode }',// 请求的action路径
	          error : function(XMLHttpRequest, textStatus, errorThrown) {
	            layer.msg("请求失败！");
	          },
	          success : function(data) {
	            if(data.state=="1"){
	              record();     //开始录制
	              seconds = data.message;
	              setLastTime();
	              layer.msg("朗读开始！",{icon:1});
	              $(".start-btn").hide();
	              isread = true;
	              i = 1000;
	              change('<%=basePath%>declaimer/materialinfo?guid=${user.guid}&id=${material.id }');
	            }else{
	              layer.msg(data.message,{icon:0});
	            }
	          }
	        });
      });
		var seconds = 0;
		function setLastTime(){
			var second = seconds%60;
			var minute = (seconds-second)/60;
			if(minute<10)
				$("#minute").html("0"+minute);
			else
				$("#minute").html(minute);
			if(second<10)
				$("#second").html("0"+second);
			else
				$("#second").html(second);
			if(seconds>0){
				seconds--;
				setTimeout(function() { 
					setLastTime();
				},1000);
			}else{
				var index = layer.msg('视频正在保存中', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false, time:10000});
				stopRecord();
			}
		}
      	var isend = false;
		$(".over-btn").click(function() {
			if(isend){
				return;
			}
			if (isread) {
				isend = true;
				var index = layer.msg('视频正在保存中', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false, time:10000});
				stopRecord();
				//setEncoderState(1);
			} else {
				layer.confirm('是否退出朗读？', {
					btn : [ '确定', '取消' ]
				//按钮
				}, function() {
					setEncoderState(0);
				}, function() {
				});
			}
		});
		$(".video").hide();
		$(".pictype").show();
		
		//停止录制 status 0-无朗读记录，1-有朗读记录 
		function setEncoderState(status) {
			if(status=="1"){
				//https://139.224.17.20/school/camera/upload
				upload('<%=basePath%>declaimer/uploadfile?guid=${user.guid}&devicecode=${devicecode }&cardno=${user.cardno}','audioFile');
				
			}else {
				 gotoLast();
			}
		}
		function gotoLast(){
			window.location.href = '<%=basePath%>declaimer/endread2?guid=${user.guid}&devicecode=${devicecode }';
		}
		change('<%=basePath%>declaimer/materialinfo?guid=${user.guid}&id=${material.id }');
		   function change(url) {  
			   jsobj.skippage(url);
			}
	</script>
</body>

</html>